import React, {useEffect, useState} from 'react';
import {Avatar, Button, Col, Image, List, PageHeader, Row, Space, Input, message} from "antd";
import {LikeOutlined, MessageOutlined, RetweetOutlined, UploadOutlined} from "@ant-design/icons";
import PostMessage from "../postComponent";
import style from'./index.module.css'
import TweetsList from "../tweetsList";
import {post} from "../../../utils/post";
const { TextArea } = Input;
/**
 * 推文详情页
 *
 */
function TweetDetail(props) {
    const myData = JSON.parse(localStorage.getItem('usersMessage')) //自己的数据
    const [tweet,changeTweet]=useState({})  //推文数据
    // const [isShow,changeIsShow] = useState(false);
    const [like,changeLike] = useState(156);    //点赞数
    const [comment,changeComment]=useState(""); //自己的评论
    const [otherComment,changeOtherComment]=useState([])//其他评论
    const{user,msgID} =props.match.params

    useEffect(()=>{//获取推文数据
        post('/api/getOnlyMessage',{
            _id:msgID
        }).then(res=>{
            const {OnlyMessage}= res.data.data;
            changeTweet(OnlyMessage);
        })
        post('/api/searchComment',{_id:msgID}).then(
            res=>{
                let data = res.data.data.userInfo;
                if(data!==undefined){
                    changeOtherComment(data)
                }
            }
        )
    },[])
    const fakeData = [];    //评论数据
    const IconText = ({ icon, text}) => {
        return(
            <Space>
                {React.createElement(icon)}
                {text}
            </Space>
        )
    };
    const myTime=(time)=>{  //推文时间
        return time?.substring(0,10)+" "+time?.substring(11,19);
    }
    const handleChange=({ target: { value } })=>{//打印
        changeComment(value)
    }
    const sendComment=()=>{//发送评论
        if(comment){//评论不为空
            const {nickname,avater}=myData
            let sendComment={
                _id:msgID,
                nickname:nickname,
                avater:avater,
                content:comment
            }
            let arr =[sendComment,...otherComment]
            changeOtherComment(arr);
            post('/api/addComment',{_id:msgID,others:arr}).then(res=>{
                if(res.data.meta.status == 200 ){
                    changeComment("");
                    message.success("发送成功");
                }else{
                    message.warning("发送失败")
                }
            })
        }else{
            message.warning('请输入一点东西吧~')
        }
    }
    const {avater,content,createdAt,image,nickname,id}=tweet;
    return (
        <div className={style.main}>
            <PageHeader
                onBack={() =>{props.history.goBack()}}
                title="Tweet"
                className={style.header}
            />
            <List.Item className={`${style.bodyItem}`} key={id}>
            <List.Item.Meta className={`${style.meta}`}
                            avatar={<Avatar src={avater} />}
                            title={<a>{nickname}</a>}
                            onClick={()=>{props.history.push(`/index/${id}`)}}
            />
            <div>
                {content}
            </div>
            {/*图片*/}
            <Row>
                {
                    image!==undefined?image.map((value,key) => {
                        return(
                            <Col className="gutter-row" key={key} span={8}>
                                <Image
                                    className={`${style.img}`}
                                    key={key}
                                    width={160}
                                    height={160}
                                    alt="照片"
                                    src={value}
                                />
                            </Col>
                        )
                    }):""
                }
            </Row>
            <div className={style.dataBox}>
                {myTime(createdAt)}
            </div>
                <div  className={style.dataBox}>
                    <span className={style.retweet}>{1}</span><span className={style.retweetRight}>转发</span>
                    <span className={style.retweet}>{otherComment.length}</span><span className={style.retweetRight}>回复</span>
                    <span className={style.retweet}>{1}</span><span className={style.retweetRight}>点赞</span>
                </div>
            {/*点赞转发一栏*/}
            <div className={style.action}>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                    <Col className="gutter-row" span={6}>
                        <IconText icon={MessageOutlined}  key="list-vertical-message" />
                        {/*<PostMessage show={isShow} changeShow={(value)=>changeIsShow(value)}/>*/}
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <IconText icon={RetweetOutlined}  key="list-vertical-retweet-o"/>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <IconText icon={LikeOutlined} onClick={()=>changeLike(like+1)}  key="list-vertical-like-o" />
                    </Col>
                    <Col className="gutter-row" span={6}>
                        <IconText icon={UploadOutlined}  key="list-vertical-upload"/>
                    </Col>
                </Row>
            </div>
                <div>
                    <img src={myData.avater} className={style.avatar} alt="" />
                    {/*<p className={`${style.title}`} onClick={()=>changeIsShow(true)}>Tweet your reply</p>*/}
                    <Button type="primary" shape="round" onClick={()=>sendComment()} className={style.postBtn}>
                        发送
                    </Button>
                    <TextArea
                        value={comment}
                        onChange={handleChange}
                        placeholder="说点什么"
                        autoSize={{ minRows: 3, maxRows: 5 }}
                    />
                </div>
            </List.Item>
            <TweetsList isPerson={true} showImg={false} data={otherComment?otherComment:[]}/>

        </div>
    );
}

export default TweetDetail;